
const tbody = document.querySelector('tbody');

//成绩录入获取数据  成绩录入
function getData() {
    axios.get("/score/list").then(r => {
        if (r.data.code === 0) {
            const obj = r.data.data;
            let html = ''
            // 对象进行遍历
            for (const key in obj) {
                //对象里的数组部分进行拼接
                const htmlHTML = obj[key].score.reduce((h, v, i) => h +
                    `<td class="score">${v} 
                    <input type="text" data-index='${i + 1}'  data-id='${key}'>
                    </td>     
                `, '');
                html += `<tr>
            <th scope="row">${key}</th>
            <td>${obj[key].name}</td>
            ${htmlHTML}
          </tr>`
            }
            tbody.innerHTML = html;

            // 2 失去焦点 结束修改
            // 1 给input标签绑定 失去焦点事件(不能使用事件委托了， 因为只有表单标签存在失去焦点事件)
            // 2 获取到输入框里面的内容，拼接成参数 发送给后端 完成编辑
            // 3 后端响应 编辑成功
            // 1 弹出一个提示
            // 2 重新获取最新的数据
            const inputs = document.querySelectorAll('tbody input');
            inputs.forEach(input => {
                input.addEventListener("blur", function (e) {
                    axios.post("/score/entry", {
                        // 获取input的id
                        stu_id: e.target.dataset.id,
                        // 获取input的下标
                        batch: e.target.dataset.index,
                        // 获取input的值
                        score: input.value,
                    })
                        .then(r => {
                            // 判断获取数据成功
                            if (r.data.code === 0) {
                                // 弹出框显示修改成功
                                toastr.info(r.data.message)
                                //重新获取最新的数据
                                getData();
                            }
                        })
                })
            })
        }
    })
}

getData();


//用事件委托绑定成绩双击事件
tbody.addEventListener("dblclick", function (e) {
    let dom = e.target;
    // 选中为td又有类为score的标签
    if (e.target.nodeName === 'TD' && e.target.classList.contains('score')) {
        console.log('你触发了双击事件');
        //利用事件委托获取的input标签
        const input = dom.querySelector('input');
        input.style.display = 'block';
        // 获得焦点
        input.focus();
        // 将td的文本获取到input的值里面
        input.value = e.target.innerText;
    }
})